<template>
  <div class="reportsbox">
    <el-tabs type="border-card" v-model="tabs" @tab-change="changeHandler">
    <el-tab-pane label="饼图" name="pie">
      <report-pie ref="pie"/>
    </el-tab-pane>
    <el-tab-pane label="折线图" name="line">
      <report-line ref="line"/>
    </el-tab-pane>
    <el-tab-pane label="柱状图" name="bar">
      <report-bar ref="bar"/>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import Line from './components/line.vue'
import Bar from './components/bar.vue'
import Pie from './components/pie.vue'

export default {
  name: 'oaReports',
  data () {
    return {
      info: {
        pie: 1
      },
      tabs: 'pie'
    }
  },
  methods: {
    changeHandler (name) {
      if (this.info[name]) return
      this.info[name] = setTimeout(() => {
        this.$refs[name].init()
      })
    }
  },
  components: {
    'report-line': Line,
    'report-bar': Bar,
    'report-pie': Pie
  }
}
</script>
